<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品分类</title>
	<link rel="shortcut icon" href="logn.jpg">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="__ROOT__/__CSS__/common.css">
	<link rel="stylesheet" href="__ROOT__/__CSS__/iconfont.css">
	<link rel="stylesheet" href="__ROOT__/__CSS__/classify.css">
	<link rel="stylesheet" href="__ROOT__/__SWIPER__/dist/css/swiper.min.css">
</head>
<body>
<!-- 头部 -->
{include file="Config/header3" /}
<!-- 分类 -->
<div class="content">
	<div class="cat">
		<div class="fy_left">
			<ul>
				<li class="list" date-list="1">鞋靴</li>
				<li date-list="2">上衣</li>
				<li date-list="3">裤子</li>
				<li date-list="4">护理</li>
				<li date-list="5">箱包</li>
				<li date-list="6">配饰</li>
				<li date-list="7">生活</li>
				<li date-list="8">礼品</li>
			</ul>
		</div>
		<div class="fy_right">
			<div class="slideshow">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">Slide 1</div>
						<div class="swiper-slide">Slide 2</div>
						<div class="swiper-slide">Slide 3</div>
						<div class="swiper-slide">Slide 4</div>
						<div class="swiper-slide">Slide 5</div>
						<div class="swiper-slide">Slide 6</div>
						<div class="swiper-slide">Slide 7</div>
						<div class="swiper-slide">Slide 8</div>
						<div class="swiper-slide">Slide 9</div>
						<div class="swiper-slide">Slide 10</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="con">
				<ul>
					<li><img src="" alt=""><span>全部</span></li>
					<li><img src="" alt=""><span>运动鞋</span></li>
					<li><img src="" alt=""><span>帆布鞋</span></li>
					<li><img src="" alt=""><span>休闲鞋</span></li>
					<li><img src="" alt=""><span>正装鞋</span></li>
					<li><img src="" alt=""><span>靴子</span></li>
					<li><img src="" alt=""><span>拖鞋/凉鞋</span></li>
					<li><img src="" alt=""><span>护养护理</span></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="brand" style="display:none;">
		<div class="Carousel" id="Carousel">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">Slide 1</div>
					<div class="swiper-slide">Slide 2</div>
					<div class="swiper-slide">Slide 3</div>
					<div class="swiper-slide">Slide 4</div>
					<div class="swiper-slide">Slide 5</div>
					<div class="swiper-slide">Slide 6</div>
					<div class="swiper-slide">Slide 7</div>
					<div class="swiper-slide">Slide 8</div>
					<div class="swiper-slide">Slide 9</div>
					<div class="swiper-slide">Slide 10</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="filtrate">
			<div id="serial">
				<p id="A">A</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="B">B</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="C">C</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="D">D</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="E">E</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="F">F</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="G">G</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="H">H</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="I">I</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="J">J</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="K">K</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="L">L</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="M">M</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="N">N</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="O">O</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="P">P</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="Q">Q</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="R">R</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="S">S</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="T">T</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="U">U</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="V">V</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="W">W</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="X">X</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="Y">Y</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
			<div id="serial">
				<p id="Y">Z</p>
				<ul>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
					<li><img src="" alt=""><span>A.P.C</span></li>
				</ul>
			</div>
		</div>
		<div class="serial">
			<ul>
				<li><a href="#Carousel">A</a></li>
				<li><a href="#A">B</a></li>
				<li><a href="#B">C</a></li>
				<li><a href="#C">D</a></li>
				<li><a href="#D">E</a></li>
				<li><a href="#E">F</a></li>
				<li><a href="#F">G</a></li>
				<li><a href="#G">H</a></li>
				<li><a href="#H">I</a></li>
				<li><a href="#I">J</a></li>
				<li><a href="#J">K</a></li>
				<li><a href="#K">L</a></li>
				<li><a href="#L">M</a></li>
				<li><a href="#M">N</a></li>
				<li><a href="#N">O</a></li>
				<li><a href="#O">P</a></li>
				<li><a href="#P">Q</a></li>
				<li><a href="#Q">R</a></li>
				<li><a href="#R">S</a></li>
				<li><a href="#S">T</a></li>
				<li><a href="#T">U</a></li>
				<li><a href="#U">V</a></li>
				<li><a href="#V">W</a></li>
				<li><a href="#W">X</a></li>
				<li><a href="#X">Y</a></li>
				<li><a href="#Y">Z</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 尾部 -->
{include file="Config/footer" /}
</body>
<script type="text/javascript" src="__ROOT__/__JS__/jquery.min.js"></script>
<script src="__ROOT__/__SWIPER__/dist/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
	spaceBetween: 30,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});
$('#cat').click(function(){
	$(this).css('border-bottom','3px solid #000');
	$('#brand').css('border-bottom','none');
	$('.brand').css('display','none');
	$('.cat').css('display','block');
});
$('#brand').click(function(){
	$(this).css('border-bottom','3px solid #000');
	$('#cat').css('border-bottom','none');
	$('.cat').css('display','none');
	$('.brand').css('display','block');
});
$('.fy_left ul li').click(function(){
	var id = $(this).attr('date-list');
	// ajax进行页面渲染
});
</script>
</html>